<template>
  <div class="box">
    <div style="text-align: right">
      <a-button class="add-btn" type="primary" @click="addStatus"
        >+ 新增状态</a-button
      >
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'order'">
          {{ record.status == 30 || record.status == 33 ? "-" : record.sort }}
        </template>
        <template v-if="column.key == 'status'">
          {{ record.name }}
        </template>
        <template v-if="column.key == 'desc'">
          {{ record.desc }}
        </template>
        <template v-if="column.key == 'action'">
          <a-button
            type="link"
            @click="editStatus(record)"
            :disabled="record.is_root == 1"
            >编辑</a-button
          >

          <a-popconfirm
            v-if="record.is_root != 1"
            title="确定删除该状态?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteStatus(record.id)"
          >
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>

  <EditStatus
    :visible="showDrawer"
    :editItem="editItem"
    @close="() => (showDrawer = false)"
    @refresh="refreshList"
  />
</template>

<script>
import { reactive, ref, toRefs, watch } from "vue";
import EditStatus from "./EditStatus.vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";

export default {
  components: {
    EditStatus,
  },
  props: {
    activeKey: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const state = reactive({});
    const dataList = ref([]);

    const columns = [
      {
        title: "排序",
        dataIndex: "order",
        key: "order",
      },
      {
        title: "跟进状态",
        dataIndex: "status",
        key: "status",
      },
      {
        title: "阶段描述",
        dataIndex: "desc",
        key: "desc",
      },
      {
        title: "操作",
        dataIndex: "action",
        key: "action",
      },
    ];

    const getStatusList = () => {
      request.get("/org", "/business/clueStatus/clueStatusList").then((res) => {
        dataList.value = res.list;
      });
    };

    const showDrawer = ref(false);
    const editItem = reactive({
      id: 0,
    });
    const addStatus = () => {
      editItem.id = 0;
      showDrawer.value = true;
    };
    const editStatus = (val) => {
      editItem.id = val.id;
      editItem.name = val.name;
      editItem.sort = val.sort;
      editItem.desc = val.desc;
      showDrawer.value = true;
    };

    const refreshList = () => {
      showDrawer.value = false;
      getStatusList();
    };

    watch(
      () => props.activeKey,
      (val) => {
        console.log(val);
        if (val == "status") {
          getStatusList();
        }
      },
      { immediate: true }
    );

    const deleteStatus = (val) => {
      request
        .del("/org", "/business/clueStatus/delClueStatus", {
          id: val,
        })
        .then((res) => {
          console.log(res);
          message.success("删除成功");
          getStatusList();
        });
    };

    return {
      columns,
      dataList,
      addStatus,
      showDrawer,
      editStatus,
      ...toRefs(state),
      editItem,
      deleteStatus,
      getStatusList,
      refreshList,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 10px;
}
.add-btn {
  margin: 10px 10px 10px auto;
}
</style>
